<template>
  <div>
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      layout="vertical"
    >
      <a-row :gutter="[15, 15]">
        <a-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="12"
        >
          <a-form-item
            ref="projectId"
            required
            label="项目名称"
            name="projectId"
          >
            <a-select
              v-model:value="form.projectId"
              placeholder="请选择项目"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            >
              <!-- <a-select-option value="">请选择项目</a-select-option> -->
              <a-select-option value="">请选择项目</a-select-option>
              <a-select-option
                v-for="item in projectList"
                :key="item.id"
              >{{ item.name }}</a-select-option>
            </a-select>
            <!-- <select v-model="form.projectId">
          <option v-for="item in projectList" :key="item.id">{{ item.name }}</option>
        </select> -->
          </a-form-item>
        </a-col>
        <a-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="12"
        >
          <a-form-item
            required
            label="作业名称"
            name="name"
          >
            <a-input
              v-model:value="form.name"
              placeholder="作业名称与触发器名称默认相同"
            />
          </a-form-item>
        </a-col>
        <a-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="12"
        >
          <a-form-item
            label="分组"
            required
            name="groupName"
          >
            <a-input
              v-model:value="form.groupName"
              placeholder="分组名称与分组名称默认相同"
            />
          </a-form-item>
        </a-col>
        <a-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="12"
        >
          <a-form-item
            required
            name="cron"
          >
            <template #label> 间隔 : <a
                href="https://qqe2.com/cron"
                target="_blank"
              >Cron表达式规则生成地址</a> </template>
            <a-input
              v-model:value="form.cron"
              placeholder=" 如10分钟执行一次：0/0 0/10 * * * ?"
            />
          </a-form-item>
        </a-col>

        <a-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="12"
        >
          <a-form-item
            label="请求方式"
            required
            name="requsetMode"
          >
            <a-select
              ref="select"
              v-model:value="form.requsetMode"
              placeholder="请选择请求方式"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            >
              <a-select-option value="">请选择请求方式</a-select-option>
              <a-select-option :value="0">Post</a-select-option>
              <a-select-option :value="1">Get</a-select-option>
              <a-select-option :value="2">Delete</a-select-option>
            </a-select>
            <!--   <select v-model="form.requsetMode">
          <option :value="0">Post</option>
          <option :value="1">Get</option>
        </select> -->
          </a-form-item>
        </a-col>

        <a-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="12"
        >
          <a-form-item
            label="header"
            name="headerToken"
          >
            <a-input
              v-model:value="form.headerToken"
              placeholder=" 请求header验证的Key=value"
            />
          </a-form-item>
        </a-col>

        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="24"
        >
          <a-form-item
            label="ApiUrl"
            name="apiUrl"
          >
            <a-textarea
              v-model:value="form.apiUrl"
              placeholder=" 远程调用接口URL"
            />
          </a-form-item>
        </a-col>

        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="24"
        >
          <a-form-item
            label="描述"
            name="remark"
          >
            <a-textarea
              v-model:value="form.remark"
              placeholder=" 请添加任务描述"
            />
          </a-form-item>
        </a-col>
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="24"
          class="text-center"
        >
          <a-form-item>
            <a-button
              type="primary"
              @click="onSubmit"
            >确定</a-button>
            <a-button
              style="margin-left: 10px"
              @click="resetForm"
            >重置</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";
import tools from "@/services/tools";
import service from "@/services/service";

export default defineComponent({
  props: {
    formId: String,
    /* onSaveSuccess: Function, */
  },
  setup(props, context) {
    const { formId } = toRefs(props);

    const state = reactive({
      form: {
        id: formId.value,
        name: "", //作业名称
        projectId: "",
        projectName: "",
        groupName: "",
        cron: "",
        apiUrl: "",
        headerToken: "",
        requsetMode: undefined /* 0:post  1:get 2:delete*/,
        remark: "",
        state: 0,
      },
      projectList: [],
    });
    const formRef = ref();
    const rules = {
      name: [
        {
          required: true,
          trigger: "change",
          message: "任务名称不可为空",
          whitespace: true,
        },
      ],
      groupName: [
        {
          required: true,
          trigger: "change",
          message: "组名不可为空",
          whitespace: true,
        },
      ],
      cron: [
        {
          required: true,
          trigger: "change",
          message: "时间不可为空",
        },
      ],
      apiUrl: [
        {
          required: true,
          trigger: "change",
          message: "地址不可为空",
          whitespace: true,
        },
      ],
      requsetMode: [
        {
          type: "number",
          required: true,
          trigger: "change",
          message: "请求方式不可为空",
        },
      ],
      projectId: [
        {
          required: true,
          trigger: "change",
          message: "项目名称不可为空",
          whitespace: true,
        },
      ],
      headerToken: [
        {
          trigger: "change",
          pattern: /^\w+([-+.]\w+)*=\w+([-+.]\w+)*$/,
          message: "headerToken只允许设置一个,且格式为key=value",
        },
      ],
      /* remark: [
        {
          trigger: "change",
        },
      ], */
    };

    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          methods.saveForm();
        })
        .catch(() => {});
    };

    const resetForm = () => {
      formRef.value.resetFields();
    };
    const methods = {
      findList() {
        state.loading = true;
        service.findList("Project").then((res) => {
          state.projectList = res.data;
        });
      },
      findTask() {
        state.loading = true;
        service.findForm("Tasks", formId.value).then((res) => {
          state.form = res.data;
        });
      },
      saveForm() {
        state.form.projectName = state.projectList.filter(
          (x) => x.id == state.form.projectId
        )[0].name;
        service.saveForm("Tasks", state.form).then((res) => {
          if (res.code != 1) return;
          tools.message("操作成功!", "成功");
          // resetForm();
          context.emit("on-save-success");
        });
      },
    };
    onMounted(() => {
      methods.findList();
      if (formId.value) methods.findTask();
    });
    return {
      ...toRefs(state),
      ...methods,
      formRef,
      // wrapperCol: {
      //   span: 14,
      // },
      other: "",
      rules,
      onSubmit,
      resetForm,
    };
  },
});
</script>

<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
